import ScrollCarousel from '../carousel-scroll/ScrollCarousel.vue';
import CarouselItem from '../carousel-scroll/CarouselItem.vue';
import {action} from '@storybook/addon-actions';

export default {
  components: {CarouselItem},
  title: '轮播/操作Scroll',
  component: ScrollCarousel,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue、tailwindcss</span> 使用`
      }
    }
  },
  argTypes: {
    direction: {
      description: '轮播方向',
      control: 'select',
      options: ['x', 'y']
    },
    gapX: {description: '水平方向间隙'},
    gapY: {description: '垂直方向间隙'},
    play: {description: '是否启动轮播'},
    cycleMs: {description: '轮播周期毫秒值'},
    numInGroup: {description: '轮播组内元素数量，必须为首行或首列元素整数倍，首行或首列与轮播方向相关，同时注意每个轮播项的宽高保持一致'},
    default: {description: '轮播容器内容部分'},
    carousel: {description: '每次轮播都被触发的事件，参数为当前轮播组索引，索引编号从0开始'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args) => ({
    components: {ScrollCarousel, CarouselItem},
    setup() {
      return {args};
    },
    template: `
      <ScrollCarousel v-bind="args" @carousel="handleCarousel" style="width: 500px;height: 350px">
        <CarouselItem v-for="item in 21" :key="item" style="height: 100.8px;width: 150.7px">
          <div
            style="height: 100%;width: 100%;background: gainsboro;display: flex;justify-content: center;align-items: center">
            {{ item }}
          </div>
        </CarouselItem>
      </ScrollCarousel>`,
    methods: {
      handleCarousel: action('carousel')
    }
  }),
  args: {
    direction: 'y',
    gapX: 12,
    gapY: 12,
    play: true,
    cycleMs: 4000,
    numInGroup: 9,
  }
};